<template>
  <div>
    <el-card class="box-card" v-for="(Activity, disposalIndex) in ActivityAreaList" :key="disposalIndex"
      style="margin-top: 20px">
      <el-row>
        <el-col :span="6">
          <div style="display: flex">
            <div style="
                line-height: 36px;
                font-size: 15px;
                color: #606266;
                font-weight: 700;
                margin-right: 10px;
              ">
              区域/设备
            </div>
            <el-select v-model="Activity.zoneofaction" placeholder="请选择区域/设备" style="    width: 170px;">
              <el-option label="区域" value="区域"></el-option>
              <el-option label="设备" value="设备"></el-option>
            </el-select>
            <div style="margin-left: 1%">
              <el-button type="text" icon="el-icon-plus" v-if="disposalIndex === ActivityAreaList.length - 1"
                @click="addArea(disposalIndex)" circle></el-button>
            </div>
            <div style="margin-left: 1%">
              <el-button type="text" icon="el-icon-minus" @click="removedArea(disposalIndex)" circle></el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <div style="
                line-height: 36px;
                font-size: 15px;
                color: #606266;
                font-weight: 700;
                width: 101px;
              ">
              区域/地点名称
            </div>
            <el-input v-model="Activity.AccidentArea" autocomplete="off" placeholder="请输入区域/地点名称"
              style="width: 284px"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div style="display: flex">
            <div style="
                line-height: 36px;
                font-size: 15px;
                color: #606266;
                font-weight: 700;
                width: 124px;
              ">
              处置措施名称
            </div>
            <el-input v-model="Activity.MeasureName" placeholder="请输入处置措施名称" autocomplete="off"
              style="width: 284px"></el-input>
          </div>
        </el-col>
      </el-row>

      <!-- 序号 -->
      <el-row style="margin-top: 30px;">
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>处置序号</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                @click="addDisposal(disposalIndex)">+</el-button>
            </div>
            <div v-for="(Disposal, index) in Activity.Disposalserialnumber" :key="index">
              <div :style="{
                display: 'flex',
                lineHeight: '36px',
                justifyContent: 'space-between',
                color: Activity.currentDisposal === index ? '#038ff3' : 'initial',
                cursor: 'pointer',
              }" @click="showCard(disposalIndex,index)">
               NO.{{index+1 }}
                <div>
                  <el-button type="text" @click="removeDisposal(disposalIndex, index)">-</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="19" style="margin-left: 30px">
          <el-card v-if="isCardVisible" class="box-card">
            <div v-for="(Disposal, index) in Activity.Disposalserialnumber" :key="index"
              v-show="Activity.currentDisposal === index">
              <!-- 预案处理步骤和处理人员内容 -->
              <div style="display: flex">
                <div style="
                  line-height: 36px;
                  font-size: 15px;
                  color: #606266;
                  font-weight: 700;
                  margin-right: 10px;
                ">
                  预案处理步骤
                </div>
                <el-select v-model="Disposal.Planprocess" placeholder="请选择预案处理步骤">
                  <el-option v-for="item in Planprocessingstepsliest" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </div>

              <div style="margin-top: 30px" v-for="(item, itemIndex) in Disposal.divContents" :key="itemIndex">
                <div style="display: flex">
                  <div style="
                    line-height: 36px;
                    font-size: 15px;
                    color: #606266;
                    font-weight: 700;
                    margin-right: 10px;
                  ">
                    处理人员
                  </div>
                  <el-select v-model="item.DealExecutor" placeholder="请选择">
                    <el-option v-for="person in Processingpersonnelliest" :key="person" :label="person"
                      :value="person"></el-option>
                  </el-select>
             <!-- <div style="margin-left: 10px;    font-size: 19px;
">
              <div> +</div><div>-</div>
             </div> -->
                  <div style="margin-left: 1%">
                    <el-button type="primary" plain v-if="itemIndex === Disposal.divContents.length - 1" @click="
                      addContentWithDealExecutor(
                        disposalIndex,
                        index,
                        itemIndex
                      )
                      ">+</el-button>
                  </div>
                  <div style="margin-left: 1%">
                    <el-button type="danger" plain @click="removeContent(disposalIndex, index, itemIndex)">-</el-button>
                  </div>
                </div>
                <div style="
                  display: flex;
                  flex-wrap: wrap;
                  width: 1270px;
                  margin-left: 30px;
                ">
                  <div v-for="(content, contentIndex) in item.contents" :key="contentIndex" style="
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 25px;
                    width: 344px;
                    margin-left: 6px;
                  ">
                    <div style="line-height: 34px">{{ contentIndex + 1 }}.</div>
                    <el-input type="textarea" :rows="1" placeholder="请输入处置内容" v-model="content.value" @input="
                      updateContent(
                        disposalIndex,
                        index,
                        itemIndex,
                        contentIndex
                      )
                      " style="margin-left: 20px; width: 178px"></el-input>
                    <div style="margin-left: 1%">
                      <el-button v-if="contentIndex === item.contents.length - 1" type="primary" plain @click="addContents(
                        disposalIndex,
                        index,
                        itemIndex,
                        contentIndex)">+</el-button>
                    </div>
                    <div style="margin-left: 1%">
                      <el-button v-if="contentIndex === item.contents.length - 1" type="danger" plain @click="removeContents(
                        disposalIndex,
                        index,
                        itemIndex,
                        contentIndex)">-</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 遍历的数据结构点击添加往后面push
      ActivityAreaList: [
        {
          zoneofaction: "",
          AccidentArea: "",
          MeasureName: "",
          // 左边的选中状态
          currentDisposal: 0,
          Disposalserialnumber: [
            {
              DealStep: "", //预案处理步骤
              divContents: [
                {
                  DealExecutor: "", //处理人员
                  contents: [{ value: "" }],
                },
              ],
            },
          ], // 存储处置信息的数组
        },{
          zoneofaction: "",
          AccidentArea: "",
          MeasureName: "",
          currentDisposal: 0,
          Disposalserialnumber: [
            {
              DealStep: "", //预案处理步骤
              divContents: [
                {
                  DealExecutor: "", //处理人员
                  contents: [{ value: "" }],
                },
              ],
            },
          ], // 存储处置信息的数组
        },
      ],
      // currentDisposal: 0,
      isCardVisible: true,
      // 处理人员列表
      Processingpersonnelliest: [
        "第一目击者",
        "现场人员",
        "现场调度",
        "安全人员",
      ],
      // 预案处理步骤列表
      Planprocessingstepsliest: [
        "发出警报",
        "第一时间处置",
        "指挥救援",
        "现场急救",
        "善后处置",
      ],
    };
  },
  methods: {
    // 活动区域+
    addArea(ActivityIndex) {
      const newActivity = {
        zoneofaction: "",
        AccidentArea: "",
        MeasureName: "",
        // 新增添加左边默认选中list第一个元素
        currentDisposal: 0,
        Disposalserialnumber: [
          {
            DealStep: "", //预案处理步骤
            divContents: [
              {
                DealExecutor: "", //处理人员
                contents: [{ value: "" }],
              },
            ],
          },
        ],
      };
      // 练习一下数组的splice添加元素 正常需求不复杂就是用this.ActivityAreaList.push(newActivity);
      // this.ActivityAreaList.splice(ActivityIndex + 1, 0, newActivity);
      this.ActivityAreaList.push(newActivity);
    },
    // 活动区域-
    removedArea(ActivityIndex) {
      if (this.ActivityAreaList.length > 1) {
        this.ActivityAreaList.splice(ActivityIndex, 1);
      }
    },
    addDisposal(ActivityIndex) {
      const newDisposal = {
        index: this.ActivityAreaList[ActivityIndex].Disposalserialnumber.length + 1,
        DealStep: "", //预案处理步骤
        divContents: [
          {
            DealExecutor: "", //处理人员
            contents: [{ value: "" }],
          },
        ],
      };
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber.push(newDisposal); // 将新的处置添加到数组中
    },
    removeDisposal(ActivityIndex, index) {
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber.splice(index, 1); // 从数组中删除指定序号的处置
      if (this.currentDisposal === index) {
        this.isCardVisible = false;
        this.currentDisposal = 0;
      }
    },
    showCard(ActivityIndex,index) {
      console.log(this.ActivityAreaList[ActivityIndex].Disposalserialnumber);
      // 把index提到数组对象里面控制左边的切换
      this.ActivityAreaList[ActivityIndex].currentDisposal=index
      this.isCardVisible = true;
    },
    // 处理人员+
    addContentWithDealExecutor(ActivityIndex, disposalIndex, contentIndex) {
      const newItem = {
        DealExecutor: "",
        contents: [{ value: "" }],
      };
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
        disposalIndex
      ].divContents.splice(contentIndex + 1, 0, newItem);
    },
    // 处理人员-
    removeContent(ActivityIndex, disposalIndex, contentIndex) {
      if (
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents.length > 1
      ) {
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
          disposalIndex
        ].divContents.splice(contentIndex, 1);
      }
    },
    // 处置内容输入框内容
    updateContent(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      const content =
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents[innerIndex];
      // console.log("Updated content:", content.value);
    },
    // 处置内容+
    addContents(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      const newContent = { value: "" };
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
        disposalIndex
      ].divContents[contentIndex].contents.splice(
        innerIndex + 1,
        0,
        newContent
      );
    },
    // 处置内容-
    removeContents(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      if (
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents.length > 1
      ) {
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
          disposalIndex
        ].divContents[contentIndex].contents.splice(innerIndex, 1);
      }
    },
    addsumbe() {
      const values = []; // 用于存储插入语句的值

      for (let i = 0; i < this.ActivityAreaList.length; i++) {
        const element = this.ActivityAreaList[i];

        for (let j = 0; j < element.Disposalserialnumber.length; j++) {
          const Disposalserelement = element.Disposalserialnumber[j];

          for (let k = 0; k < Disposalserelement.divContents.length; k++) {
            const posalelement = Disposalserelement.divContents[k];

            const valuesArray = [
              "PlanType", // 你要插入的 PlanType 值
              "PlanName", // 你要插入的 PlanName 值
              element.AccidentArea, // 地点名称
              "", // AccidentPoint，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealCode，根据提供的数据没有对应的值，这里先设置为空字符串
              Disposalserelement.DealStep, // 预案处理步骤
              element.MeasureName, // 措施名称
              posalelement.DealExecutor, // 处理人员
              posalelement.contents[0].value || "", // 内容，如果有值则取第一个元素的 value 属性，否则设为空字符串
              "", // DealContent2，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent3，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent4，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent5，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent6，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent7，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent8，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent9，根据提供的数据没有对应的值，这里先设置为空字符串
              "", // DealContent10，根据提供的数据没有对应的值，这里先设置为空字符串
            ];

            const sqlValues = "'" + valuesArray.join("','") + "'";
            values.push(`(${sqlValues})`);
          }
        }
      }

      const insertStatement = `INSERT INTO IMP."EmergPlan_SiteRspMrs_Deal" (\`PlanType\`, \`PlanName\`, \`AccidentArea\`, \`AccidentPoint\`, \`DealCode\`, \`DealStep\`, \`MeasureName\`, \`DealExecutor\`, \`DealContent1\`, \`DealContent2\`, \`DealContent3\`, \`DealContent4\`, \`DealContent5\`, \`DealContent6\`, \`DealContent7\`, \`DealContent8\`, \`DealContent9\`, \`DealContent10\`) VALUES ${values.join(
        ", "
      )}`;
      console.log(insertStatement);
    },
  },
  mounted() { 
       console.log(this.ActivityAreaList);
  },
};
</script>
<style lang="scss" scoped>
// index.scss 建议定义一个scss文件，样式抽离
// @import './index.scss'
.selected-index {
  color: #038ff3;
}
// 内联样式写到这里，简化template的代码
</style>
